<template>
  <div :id="domId" :style="{ width: '100%', height: vHeight }"></div>
</template>

<script>
export default {
  components: {},
  props: {
    // div ID
    domId: {
      type: String,
      default: "myChart_1111",
    },
    vHeight: {
      type: String,
      default: "234px",
    },
    companyData: {
      type: String,
      default: "0",
    },
    colorStops: {
      type: Array,
      default: () => {
        return [];
      },
    },
    liquidColor: {
      type: String,
      default: "#6200D0",
    }
  },
  data() {
    return {
      capital: this.companyData,
      // color: ["#6200D0", "#008AFF", "#00FFFF"]
    };
  },
  watch: {
    capital: {
      handler: function (val, oldVal) {
        if (val !== oldVal) {
          this.initEcharts();
        }
      },
      deep: true,
    },
  },
  methods: {
    initEcharts() {
      // 资本占比-私营企业
      let myChart = this.$echarts.init(document.getElementById(this.domId));
      let option = {
        backgroundColor: "#060f39",
        series: [
          {
            type: "liquidFill",
            radius: "80%",
            center: ["50%", "50%"],
            data: [this.capital / 100], // data个数代表波浪数
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: this.colorStops,
                globalCoord: false,
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: "#060f39",
            },
            label: {
              normal: {
                formatter: this.capital + "%",
                textStyle: {
                  fontSize: 32,
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "81%"],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 1,
                labelLine: {
                  show: false,
                },
                // let 
                itemStyle: {
                  color: this.liquidColor,
                },
              },
            ],
          },
        ],
      };
      
      myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.initEcharts();
  },
};
</script>
<style lang='scss' scoped>
</style>